<template>
  <div>
    <template v-for="(item, index) in data.items">
      <el-row>
        <el-col :span="6">
          <div class="item left">{{item.fieldInfo.name}}</div>
        </el-col>
        <el-col :span="18">
          <div v-if="item.fieldInfo.type === 'CHECKBOX'" class="item right">
            <el-button v-for="opt in item.value" size="small" :key="opt">{{opt}}</el-button>&nbsp; 
          </div>
          <div v-else-if="item.fieldInfo.type === 'FILE'" class="item right">
            <el-button v-for="file in item.value" size="small" :key="file.name">{{file.name}}</el-button>&nbsp; 
          </div>
          <div v-else class="item right">{{item.value || item.longValue}} &nbsp; </div>
        </el-col>
      </el-row>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: {}
    }
  }
}
</script>

<style>
.el-row .item {
  background: #e5e9f2;
  line-height: 35px;
  border-radius: 5px;
  margin: 2px;
}
.left{
  text-align: right;
  padding-right: 50px;
}
.right{
  text-align: left;
  padding-left: 20px;
}
</style>